<template>
  <div>
    <!-- 2.语法： {{ 表达式 }}
    作用：  给标签设置内容 -->
    <h1>{{ name }}</h1>
    <h2>{{ hobby }}</h2>
    <h3>{{ hobby[0] }}</h3>
    <h4>123 - {{ child.name }}</h4>
    <h5>{{ child.age >= 18 ? "成年人" : "未成年人" }}</h5>

    <!-- 注意：❌只能设置内容， 不能写在属性上 -->
    <h6 {{name}}></h6>

    <!-- 注意：❌ {{}}中只能放表达式， 不能放语句  -->
    <!-- <h7>{{if(true){}}}</h7> -->
  </div>
</template>

<script>
/*
  学习目标：掌握声明数据和插值表达式的使用
  插值表达式作用:  给标签设置内容
*/
export default {
  // 1. 声明数据
  data() {
    return {
      // 💥 data函数必须返回对象，
      // 对象的属性名, 就是vue中的变量名
      name: "zs",
      hobby: ["睡觉", "吃饭", "唱歌"],
      child: {
        name: "狂徒",
        age: 30,
      },
    };
  },
};
</script>

<style>
</style>